<template>
    <div class="container">
      <div class="top">
        
        <el-select
          v-model="search.area"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请输入区域"
          :remote-method="insideRemoteMethods"
          :loading="insideArea.loading"
        >
          <el-option
            v-for="item in insideArea.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="search.status" multiple placeholder="请选择结算类型">
          <el-option
            v-for="item in businessType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
  
        <el-select v-model="search.kind" placeholder="请选择结算类别">
          <el-option
            v-for="item in supplierType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
  
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索类别信息"
          v-model="classNameList.name"
        >
          <template slot="prepend">类别</template>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="classBtn"
          ></el-button>
        </el-input>
  
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索商品信息"
          v-model="commodityNameList.name"
        >
          <template slot="prepend">商品</template>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="commodityBtn"
          ></el-button>
        </el-input>
  
        <el-input
          style="width: 300px"
          :disabled="true"
          placeholder="请搜索供应商信息"
          v-model="supplierNameList.name"
        >
          <template slot="prepend">供应商</template>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="supplierBtn"
          ></el-button>
        </el-input>
  
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="date"
          type="daterange"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          class="handleSearch"
          @click="handleSearch()"
          >查询</el-button
        >
        <el-button
          size="small"
          type="danger"
          class="handleSearch"
          icon="el-icon-delete"
          @click="empty()"
          >清空</el-button
        >
        <!-- <el-button class="add" icon="el-icon-refresh" size="small" type="success" @click="refresh">刷新</el-button> -->
        <el-button
          type="info"
          size="small"
          icon="el-icon-tickets"
          @click="derive()"
          >导出</el-button
        >
      </div>
      <el-table
      max-height="600"
      :data="tableData"
      border
      style="width: 100%"
      show-summary
      :summary-method="getSummaries"
      empty-text="暂无数据"
    >
      <el-table-column
        prop="orgbh"
        label="仓库编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="org"
        label="仓库名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="supplier_code"
        label="供应商编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="yy_code"
        label="用友供应商编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="supplier_name"
        label="供应商名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="bank_acount"
        label="供应商账号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="bank"
        label="开户行"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="amount"
        label="应付金额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="pay_amount"
        label="已付金额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="un_pay_amount"
        label="未付金额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="un_amount"
        label="不结算金额"
        align="center"
      ></el-table-column>
    </el-table>
      <!-- 分页 -->
      <pagination
        @page="handleSizeChange"
        @pagesize="handleCurrentChange"
        :pageData="pageData"
      ></pagination>
      <supplierSearch
        :supplierdialog="supplierdialog"
        @tag="supplierTag"
      ></supplierSearch>
      <classDialog :classdialog="classdialog" @tag="classTag"></classDialog>
      <commodityDialog
        :commoditydialog="commoditydialog"
        @tag="commodityTag"
      ></commodityDialog>
    </div>
  </template>
  <script>
  import { getnowDate } from "@/utils/index";
  import Pagination from "@/components/pagination";
  import SupplierSearch from "@/components/superGrossMargin/supplierSearch";
  import ClassDialog from "@/components/superGrossMargin/classDialog";
  import CommodityDialog from "@/components/superGrossMargin/commodityDialog";
  import { payableAllReport } from "@/api/superGrossMargin/index";
  import { getToken } from "@/utils/auth";
  // import { getAreaList } from "@/api/permission/adminlist";
  import { getRegionData } from "@/api/supplier/supplierList";
  export default {
    components: {
      pagination: Pagination,
      supplierSearch: SupplierSearch,
      classDialog: ClassDialog,
      commodityDialog: CommodityDialog,
    },
    data() {
      return {
        //页面数据
        tableData: [],
        //分页
        pageData: {
          pageSizes: [10, 20],
          pageSize: 10,
          page: 1,
          total: null,
          layout: "total, sizes, prev, pager, next, jumper",
        },
        supplierType: [
          {
            value: "10",
            label: "购货入库",
          },
          {
            value: "20",
            label: "供应商商品订单收货",
          },
          {
            value: "30",
            label: "中仓操作高退低进负的结算单",
          },
          {
            value: "40",
            label: "商超操作高退低进负的结算单",
          },
          {
            value: "50",
            label: "返点增加负的结算单",
          },
          {
            value: "60",
            label: "返货生成负结算单",
          },
          {
            value: "70",
            label: "补货生成结算单",
          },
          {
            value: "80",
            label: "商慧自购单结算单",
          },
          {
            value: "90",
            label: "商慧自购单的退货结算单",
          },
        ],
        businessType: [
          {
            value: "1",
            label: "待结算",
          },
          {
            value: "2",
            label: "已结算",
          },
          {
            value: "3",
            label: "部分结算",
          },
          {
            value: "4",
            label: "冻结",
          },
          {
            value: "5",
            label: "不结算",
          },
        ],
        //合计
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = "合计";
              return;
            }
            const values = data.map((item) => Number(item[column.property]));
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              if (index != 7 && index != 8 && index != 9&& index != 10) {
                sums[index] = "";
              } else {
                sums[index] = sums[index].toFixed(4);
              }
            } else {
              sums[index] = "";
            }
          });
  
          return sums;
        },
        //默认时间
        normal_startime: getnowDate().endtimer,
        normal_endtime: getnowDate().endtimer,
        search: {
          kind: "",
          status: [],
          start_time: "",
          end_time: "",
         
          area: "",
        },
        outer: {
          options: [],
          value: "",
          list: [],
          loading: false,
          id: "",
        },
        insideArea: {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false,
        },
        //dialog信息
        supplierdialog: {
          centerDialogVisible: false,
        },
        classdialog: {
          centerDialogVisible: false,
        },
        commoditydialog: {
          centerDialogVisible: false,
        },
        supplierNameList: {
          name: "",
          code: "",
        },
        commodityNameList: {
          name: "",
          code: "",
        },
        classNameList: {
          name: "",
          code: "",
        },
        date: [],
      };
    },
    created() {
      this.search.start_time = this.normal_endtime;
      this.search.end_time = this.normal_endtime;
      if (this.normal_endtime) {
        this.date.push(this.search.end_time);
      }
      if (this.normal_endtime) {
        this.date.push(this.search.end_time);
      }
      this.getData();
      this.getAreaData();
    },
    methods: {
      //获取页面数据
      getData() {
        let data = {
          limit: this.pageData.pageSize,
          page: this.pageData.page,
          status: this.search.status.join(','),
          kind: this.search.kind,
          start_date: this.search.start_time,
          end_date: this.search.end_time,
          supplier_id_str: this.supplierNameList.code,
          erp_goods_code_str: this.commodityNameList.code,
          category_code_str: this.classNameList.code,
         
          orgarea_code_str: this.search.area,
        };
        payableAllReport(data)
          .then((res) => {
            if (res.code == 0) {
              this.tableData = res.data.list.data;
              this.pageData.page = res.data.list.current_page;
              this.pageData.pagesize = res.data.list.per_page;
              this.pageData.total = res.data.list.total;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getAreaData() {
        let data = {
          page: 1,
          limit: 50,
        };
  
        //获取初始化区域列表
        getRegionData(data).then((res) => {
          this.insideArea.options = res.data.paginate.map((item) => {
            return { value: `${item.code}`, label: `${item.name}` };
          });
        });
      },
      // 搜索区域
      insideRemoteMethods(query) {
        if (query !== "") {
          this.getSupplierLists(query);
        } else {
          this.insideArea.options = [];
        }
      },
      getSupplierLists(query) {
        let data = {
          name: query,
          page: 1,
          limit: 100,
        };
        getRegionData(data).then((res) => {
          this.insideArea.list = res.data.paginate.map((item) => {
            return { value: `${item.code}`, label: `${item.name}` };
          });
          this.insideArea.options = this.insideArea.list.filter((item) => {
            this.insideArea.loading = false;
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        });
      },
      supplierTag(data) {
        this.supplierNameList = {
          name: "",
          code: "",
        };
        console.log(data, 11111);
        let arrName = [];
        let arrCode = [];
        data.forEach((res) => {
          arrName.push(res.name);
          arrCode.push(res.id);
        });
        this.supplierNameList.name = arrName.join(",");
        this.supplierNameList.code = arrCode.join(",");
      },
      commodityTag(data) {
        this.commodityNameList = {
          name: "",
          code: "",
        };
        console.log(data, 11111);
        let arrName = [];
        let arrCode = [];
        data.forEach((res) => {
          arrName.push(res.name);
          arrCode.push(res.id);
        });
        this.commodityNameList.name = arrName.join(",");
        this.commodityNameList.code = arrCode.join(",");
      },
      classTag(data) {
        this.classNameList = {
          name: "",
          code: "",
        };
        console.log(data, 11111);
        let arrName = [];
        let arrCode = [];
        data.forEach((res) => {
          arrName.push(res.name);
          arrCode.push(res.code);
        });
        this.classNameList.name = arrName.join(",");
        this.classNameList.code = arrCode.join(",");
      },
      //超级供应商搜索
      supplierBtn() {
        this.supplierdialog = {
          centerDialogVisible: true,
        };
      },
      //超级商品搜索
      commodityBtn() {
        this.commoditydialog = {
          centerDialogVisible: true,
        };
      },
      //超级类别搜索
      classBtn() {
        this.classdialog = {
          centerDialogVisible: true,
        };
      },
      // 本地搜索
      handleSearch() {
        if (this.date) {
          this.search.start_time = this.date[0];
          this.search.end_time = this.date[1];
        }
        this.pageData.page = 1;
        this.pageData.total = null;
        this.getData();
      },
  
      // 导出
      derive() {
        this.$confirm("是否导出?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let link = document.createElement("a");
            link.href =
              this.$axios.defaults.baseURL +
              "/smkapi/report/exportPayableAllReportXlsx?token=" +
              getToken() +
              "&status=" +
              this.search.status.join(',') +
              "&kind=" +
              this.search.kind +
              "&start_date=" +
              this.search.start_time +
              "&end_date=" +
              this.search.end_time +
              "&supplier_id_str=" +
              this.supplierNameList.code +
              "&category_code_str=" +
              this.classNameList.code +
              "&erp_goods_code_str=" +
              this.commodityNameList.code +
              "&orgarea_code_str=" +
              this.search.area;
            link.click();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消导出",
            });
          });
      },
      //刷新
      refresh() {
        this.empty();
        this.getData();
      },
      //清空
      empty() {
        this.date = [];
        this.date.push(this.normal_endtime);
        this.date.push(this.normal_endtime);
        this.search = {
          kind: "",
          status: [],
          start_time: this.normal_endtime,
          end_time: this.normal_endtime,
          supplier_id: "",
          class_id: "",
          area: "",
        };
        this.insideArea = {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false,
        };
        this.getAreaData();
        this.supplierNameList = {
          name: "",
          code: "",
        };
        this.classNameList = {
          name: "",
          code: "",
        };
        this.commodityNameList = {
          name: "",
          code: "",
        };
      },
      //每页多少条
      handleCurrentChange(val) {
        this.pageData.page = 1;
        this.pageData.pageSize = val;
        this.getData();
      },
      //选取页数
      handleSizeChange(page) {
        this.pageData.page = page;
        this.getData();
      },
    },
  };
  </script>
  <style scoped>
  .top {
    position: relative;
    margin-bottom: 5px;
  }
  
  .add {
    position: absolute;
    right: 0;
    top: 4px;
  }
  .pagination {
    text-align: right;
    padding: 10px;
  }
  </style>